<!--站点编辑-->
<template>
  <div class="minW1060-auto bg-fff mt10">
    <div class="pad20 ml10">

      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/station' }">站点管理</el-breadcrumb-item>
        <el-breadcrumb-item>站点编辑</el-breadcrumb-item>
      </el-breadcrumb>

      <el-row>
        <el-col align="right">
          <div class="dlblock-mb20 pr10 ml20">
            <el-button type="primary" @click="saveStationFn">保存</el-button>
          </div>
          <div class="dlblock-mb20 pr10">
            <el-button type="danger" @click="resetForm('station')">重置</el-button>
          </div>
        </el-col>
      </el-row>

      <el-row>
        <el-col align="left">
          <h1>基本信息</h1>
        </el-col>
      </el-row>

      <el-row :gutter="30" class="mt20">

        <el-form label-position="left" label-width="100px" :model="station"
                 ref="station">

          <el-row>
            <el-col :span="6" :offset="1">
              <el-form-item label="站点名称" prop="name" required>
                <el-input maxlength="10" clearable v-model.trim="station.name" @input="StationAbbr"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="1">
              <el-form-item label="名称拼音" prop="pinyin" required>
                <el-input maxlength="10" clearable v-model.trim="station.pinyin"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="6" :offset="1">
              <el-form-item label="拼音缩写" prop="abbr" required>
                <el-input maxlength="10" clearable v-model.trim="station.abbr"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="1">
              <el-form-item label="分组" required>
                <el-cascader
                    v-model="station.group"
                    :options="groups"
                    :show-all-levels="false"
                    :props="{value: 'id', label: 'name',  checkStrictly: true,expandTrigger: 'hover' }"
                    style="width: 100%" clearable></el-cascader>
              </el-form-item>
            </el-col>

          </el-row>

          <el-row>
            <el-col :span="6" :offset="1">
              <el-form-item label="启用状态" prop="state">
                <el-radio-group v-model="station.state">
                  <el-radio :label="0">已启用</el-radio>
                  <el-radio :label="1">未启用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="6" class="ml20 mt20">
              <h1>默认值</h1>
            </el-col>
          </el-row>

          <el-row class="mt20">
            <el-col :span="6" :offset="1">
              <el-form-item label="站点级别" prop="rank">
                <el-select v-model="station.rank" style="width: 100%">
                  <el-option label="常规站点" :value="0"></el-option>
                  <!--                                    <el-option label="起点站" :value="1"></el-option>-->
                  <!--                                    <el-option label="终点站" :value="2"></el-option>-->
                  <el-option label="大站" :value="3"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" :offset="1">
              <el-checkbox v-model="station.exaction">此站点默认要求准点到达</el-checkbox>
            </el-col>
          </el-row>


          <el-row class="mt20">
            <el-col :span="4" :offset="1">
              <el-form-item label="允许早到时长" prop="early" style="width: 80%">
                <el-input maxlength="10" clearable v-model.trim="station.early" :disabled="!station.exaction"
                          style="width: 50%"></el-input>
                <label style="width: 10%;margin-left: 10px">分钟</label>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="允许晚到时长" prop="late" style="width: 80%">
                <el-input maxlength="10" clearable v-model.trim="station.late" :disabled="!station.exaction"
                          style="width: 50%"></el-input>
                <label style="width: 10%;margin-left: 10px">分钟</label>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="6" class="ml20 mt20">
              <h1>站台信息</h1>
            </el-col>
          </el-row>

          <el-row class="mt20">
            <el-col :span="6" :offset="1" v-for="(item,index) in standList" :key="index"
                    style="width: 360px;" class="mb20">
              <div class="stand">

                <el-row style="z-index: 1;position: relative;top: -20px;left: 105px;height:30px">
                  <el-form-item prop="standName" label-width="0px" style="width: 40%" align="center">
                    <el-input maxlength="10" clearable v-model.trim="item.name" size="mini" class="text-input"
                              placeholder="站台名称" @input="StandAbbr(index)"></el-input>
                  </el-form-item>
                </el-row>

                <i class="el-icon-close stand_icon" @click="delStand(item,index)"></i>

                <el-row style="height: 60px">
                  <el-col :span="10" :offset="1" style="height: 60px">
                    <span>名称拼音</span>
                    <el-form-item prop="standPinyin" label-width="0px">
                      <el-input maxlength="40" clearable v-model.trim="item.pinyin" size="mini"
                                ref="standPinYin"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10" :offset="2" style="height: 60px">
                    <span>名称缩写</span>
                    <el-form-item prop="standAbbr" label-width="0px">
                      <el-input maxlength="10" clearable v-model.trim="item.abbr" size="mini"
                                ref="standAbbr"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row style="height: 60px">
                  <el-col :span="10" :offset="1" style="height: 60px">
                    <span>纬度</span>
                    <el-form-item prop="lng" label-width="0px">
                      <el-input type="number" maxlength="10" clearable v-model.trim="item.lat" size="mini"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10" :offset="2" style="height: 60px">
                    <span>经度</span>
                    <el-form-item prop="lat" label-width="0px">
                      <el-input type="number" oninput="if(value.length>6)value=value.slice(0,8)" clearable
                                v-model.trim="item.lng" size="mini"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row style="height: 60px">
                  <el-col :span="10" :offset="1" style="height: 60px">
                    <span>备注</span>
                    <el-form-item prop="remark" label-width="0px">
                      <el-input oninput="if(value.length>6)value=value.slice(0,8)" clearable v-model.trim="item.remarks"
                                size="mini"
                                ref="standRemark" placeholder="方向"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="10" :offset="2" style="height: 60px">
                    <span style="">已绑线路</span>
                    <el-form-item prop="lat" label-width="0px">
                      <!--                                            <el-input :value="item.routeNames.toString()" size="mini" readonly :show-overflow-tooltip="true"></el-input>-->
                      <el-tooltip placement="bottom" style="width: 100%;">
                        <div slot="content" style="width: 120px">
                          {{ item.routeNames ? item.routeNames.toString() : '未绑定线路' }}
                        </div>
                        <el-button class="tips" style="height: 28px;padding: 0 10px">点我查看</el-button>
                      </el-tooltip>
                    </el-form-item>
                  </el-col>
                </el-row>

                <el-row style="height: 60px">
                  <el-col :span="15" :offset="1" style="height: 60px">
                    <el-form-item prop="brt" label-width="70px" label="BRT站台">
                      <el-radio-group v-model="item.brt">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                  <el-col :span="4" :offset="2" style="height: 60px">
                    <el-form-item label-width="40px" label="定位">
                      <i class=" el-icon-location" style="cursor: pointer"
                         @click="toStandLocation(index)"/>
                    </el-form-item>
                  </el-col>
                </el-row>

              </div>
            </el-col>
            <el-col :span="6" :offset="1">
              <div class="stand_add">
                <img src="@/assets/imgs/stand_add.png" @click="addStand"/>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </el-row>
    </div>
  </div>
</template>

<script>

//引入汉字转拼音插件文件
import vPinyin from '../../../../utils/vue-py'
import {delStand, getGroupTree, saveStation} from "@/api"

export default {
  name: "index1",
  data() {
    return {

      //站点信息
      station: {
        name: '',
        pinyin: '',
        abbr: '',
        rank: 0,
        exaction: false,
        group: '',
        early: 0,
        late: 0,
        creation: null,
        modify: null,
        stands: [],
      },

      //站台集合
      standList: [],

      //站台信息
      stand: {
        id: '',
        name: '',
        pinyin: '',
        remarks: "",
        abbr: '',
        brt: '',
        lng: '',
        lat: '',
      },

      //分组
      groups: [],
    }
  },
  mounted() {

    if (this.$route.query.standList != null) {
      this.standList = this.$route.query.standList
    }
    if (this.$route.query.station != null) {
      this.station = this.$route.query.station
      if (this.$route.query.from == undefined) {
        this.standList = this.station.stands
      }
    }
    this.getGroupTreeFn()
  },

  watch: {

    'station.exaction': function (newValue, oldValue) {
      if (newValue == false) {
        this.station.early = 0
        this.station.late = 0
      } else {
        if (this.$route.query.station == null) {
          this.station.early = 5
          this.station.late = 5
        }
      }
    },

    'station.rank': function (newValue, oldValue) {
      if (this.$route.query.station == null) {
        console.log("aa")
        if (newValue == 0) {
          this.station.exaction = false
        } else if (newValue == 3) {
          this.station.exaction = true
        }
      }

    }

  },

  methods: {

    //站点拼音缩写
    StationAbbr() {
      this.station.pinyin = vPinyin.chineseToPinYin(this.station.name)
      let SX = '';
      for (var i = 0; i < this.station.pinyin.length; i++) {
        var c = this.station.pinyin.charAt(i);
        if (/^[A-Z]+$/.test(c)) {
          SX += c;
        }
      }
      this.station.abbr = SX;
    },

    //站台拼音缩写
    StandAbbr(index) {
      this.standList[index].pinyin = vPinyin.chineseToPinYin(this.standList[index].name)
      let SX = '';
      for (var i = 0; i < this.standList[index].pinyin.length; i++) {
        var c = this.standList[index].pinyin.charAt(i);
        if (/^[A-Z]+$/.test(c)) {
          SX += c;
        }
      }
      this.standList[index].abbr = SX;
    },

    // 获取当前权限下所有分组
    getGroupTreeFn() {
      getGroupTree({}).then(res => {
        this.groups = res.data.children
      })
    },

    //校验
    validate() {

      if (this.station.group == '') {
        this.$message.warning("分组不能为空")
        return false
      }
      if (this.station.name == '') {
        this.$message.warning("站点名称不能为空")
        return false
      }
      if (this.station.pinyin == '') {
        this.$message.warning("站点拼音不能为空")
        return false
      }
      if (this.station.abbr == '') {
        this.$message.warning("站点缩写不能为空")
        return false
      }
      if (this.standList.length == 0) {
        this.$message.warning("至少添加一个站台")
        return false
      }
      if (this.standList.length > 10) {
        this.$message.warning("最多添加十个站台")
        return false
      }
      for (let i = 0; i < this.standList.length; i++) {
        if (this.standList[i].name == '') {
          this.$message.warning("站台名称不能为空")
          return false
        }
        if (this.standList[i].pinyin == '') {
          this.$message.warning("站台拼音不能为空")
          return false
        }
        if (this.standList[i].abbr == '') {
          this.$message.warning("站台缩写不能为空")
          return false
        }
        if (this.standList[i].lng == '' || this.standList[i].lat == '') {
          this.$message.warning("站台经纬度不能为空")
          return false
        }
        if (this.standList[i].remarks == '') {
          this.$message.warning("站台备注不能为空")
          return false
        }
      }
      return true
    },

    //保存站点信息
    saveStationFn() {

      if (this.validate()) {
        if (this.station.group.length != 0) {
          this.station.group = this.station.group[this.station.group.length - 1]
        }
        this.station.stands = this.standList
        saveStation(this.station).then(res => {
          if (res != null & res.code == 200) {
            this.$message.success("保存成功")
            this.$router.push("/station")
            this.$store.dispatch('tagsView/delView', {path: '/station/edit'})
          }
        })
      }
    },

    //重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },

    //添加站台
    addStand() {
      if (this.standList.length < 10) {
        let stand = JSON.parse(JSON.stringify(this.stand))
        this.standList.push(stand)
      } else {
        this.$message.warning("最多添加10个站台")
      }
    },

    //删除站台
    delStand(item, index) {
      if (this.standList.length > 1) {
        if (item.id != '') {
          delStand(item.id).then(res => {
            if (res.data != null) {
              this.standList.splice(index, 1)
            }
          })
        } else {
          this.standList.splice(index, 1)
        }
      } else {
        this.$message.warning("最少添加一个站台")
      }

    },

    //跳转到绘制站点
    toStandLocation(data) {
      this.$router.push({
        path: '/station/location',
        query: {standList: this.standList, station: this.station, index: data}
      })
    }
  }
}
</script>

<style>

.stand {
  position: relative;
  width: 360px;
  height: 250px;
  border: #dcdfe6 solid 1px;
}

.stand_add img {
  display: block;
  width: 300px;
  height: 250px;
  cursor: pointer;
}

.stand_icon {
  position: absolute;
  left: 341px;
  top: 5px;
  cursor: pointer;
}

.text-input .el-input__inner {
  height: 28px;
  line-height: 28px;
  text-align: center;
}

</style>

<style scoped>
.el-button--medium tips {
  padding: 0px 20px;
  height: 28px;
}
</style>
